<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right"> <!---(item.id,curId)-->
        <span @click="changeTab(item.id)" v-for="(item,index) in items" :key="item.id" :class="{active : index===curId}">{{item.label}}</span>
      </div>
    </div>
    <div class="content-wrap">
      <div v-if="curId===0" class="chart-content" ref="inHospitalBed1">
        2019
      </div>
      <div v-if="curId===1" class="chart-content" ref="inHospitalBed2">
        2020
      </div>
      <div v-if="curId===2" class="chart-content" ref="inHospitalBed3">
        2021
      </div>
    </div>
    <img src="@/assets/images/848.png" class="card819" alt="">
  </Fragment>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'

import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-multi-analysis3-menjizhengguahao',
  components:{Fragment},
  props:{
    items:{
      type:Array
    },
    title:{
      type:String
    }
  },
  data(){
    return{
      curId:0,
    }
  },
  mounted(){
    this.makeData()
  },
  methods:{
    changeTab(id){
      this.curId=id
    },
    makeData(){
              // 住院在床/手术统计
      let option7 = {
          backgroundColor: '',
          color:['#C4BF30','#0D3F4F'],
          tooltip: {
              trigger: 'axis',
              backgroundColor:'transparent',
              axisPointer: {
                  lineStyle: {
                      color: {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [{
                              offset: 0,
                              color: 'rgba(126,199,255,0)' // 0% 处的颜色
                          }, {
                              offset: 0.5,
                              color: 'rgba(126,199,255,1)' // 100% 处的颜色
                          }, {
                              offset: 1,
                              color: 'rgba(126,199,255,0)' // 100% 处的颜色
                          }],
                          global: false // 缺省为 false
                      }
                  },
              }
          },
          legend: {
              align: "left",
              right: '0%',
              top:'1%',
              icon: 'roundRect',
                      
              textStyle:{
                  color:'#cccccc',
                  fontSize:14
              },
              itemGap:25,
              itemWidth:18,
              data: [
                  {
                      name: '2019年'
                  },
                  {
                      name: '2020年'
                  }
              ]
          },
          grid: {
              top: '15%',
              left: '5%',
              right: '2%',
              bottom: '14%',
              // containLabel: true
          },
          xAxis: [{
              type: 'category',
              boundaryGap: false,
              axisLine: { //坐标轴轴线相关设置。数学上的x轴
                  show: true,
                  lineStyle: {
                      color: '#cccccc'
                  },
              },
              axisLabel: { //坐标轴刻度标签的相关设置
                  textStyle: {
                      color: '#cccccc',
                      padding: 6,
                      fontSize: 14
                  },
              },
              axisTick: {
                  show: false,
              },
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }],
          yAxis: [{
              name: '单位：万元',
              nameTextStyle: {
                  color: "#cccccc",
                  fontSize: 14,
                  padding:-3
              },
              min: 0,
              splitLine: {
                  show: true,
                  lineStyle: {
                      color: '#192a44'
                  },
              },
              axisLine: {
                  show: true,
                  lineStyle: {
                      color: "#cccccc"
                  }

              },
              axisLabel: {
                  show: true,
                  textStyle: {
                      color: '#cccccc',
                      padding: 6
                  },
                  formatter: function(value) {
                      if (value === 0) {
                          return value
                      }
                      return value
                  }
              },
              axisTick: {
                  show: false,
              },
          }],
          series: [{
              name: '2019年',
              type: 'line',
              symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              symbolSize: 0,
              smooth: true,
              lineStyle: {
                  normal: {
                      width: 1,
                      color: "rgba(196,191,48,1)", // 线条颜色
                  },
                  borderColor: 'rgba(196,191,48,.4)',
              },
              itemStyle: {
                  color: "rgba(25,163,223,1)",
                  borderColor: "#646ace",
                  borderWidth: 1

              },
              tooltip: {
                  show: true
              },
              areaStyle: { //区域填充样式
                  normal: {
                      //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: "#766610"
                          },
                          {
                              offset: 1,
                              color: "#141A1C"
                          }
                      ], false),
                      shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
                      shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                  }
              },
              data: ["250", "400", "382", "385", "300", "230","300","500","430","400","500","270"]
          }, {
              name: '2020年',
              type: 'line',
              symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              symbolSize: 0,
              smooth: true,
              lineStyle: {
                  normal: {
                      width: 1,
                      color: "rgba(10,219,250,1)", // 线条颜色
                  },
                  borderColor: 'rgba(0,0,0,.4)',
              },
              itemStyle: {
                  color: "rgba(10,219,250,1)",
                  borderColor: "#646ace",
                  borderWidth: 1

              },
              tooltip: {
                  show: true
              },
              areaStyle: { //区域填充样式
                  normal: {
                      //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: "#054D6B"
                          },
                          {
                              offset: 1,
                              color: "#070F1C"
                          }
                      ], false),
                      shadowColor: 'rgba(10,219,250, 0.5)', //阴影颜色
                      shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                  }
              },
              data: ["130", "320", "212", "185", "190", "100","200","400","350","300","380","200"]
          }]
      };
      this.makeGraph(this.$refs.inHospitalBed1,option7)
    },
    makeGraph(ref,option){
      let myChart=echarts.init(ref)
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .1rem;
        font-size: .11rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .1rem;
      }
    }
  }
  .content-wrap{
    // height:calc( (100vh - 1.23rem) *2 / 3 - .36rem) ;
    height:calc( (100vh - 1.23rem) / 3 - 0.37rem) !important;
    .chart-content{
      width: 98%;
      margin-right: 1%;
      margin-left: 1%;
      // height:calc( (100vh - 1.23rem) *2 / 3 - .36rem) ;
      height:calc( (100vh - 1.23rem) / 3 - 0.37rem) !important;
      float: left;
      overflow: hidden;
    }
  }
  img{width: 100%;float: left;}
</style>